<template>
  <div class="chat">
    <div class="header">
      <mu-appbar title="nickname">
        <mu-icon-button icon="chevron_left" slot="left" @click="closeChat()"/>
        <div class="center">
          聊天({{chatUser.nickname}})
        </div>
      </mu-appbar>
    </div>
    <div ref="container">
      <mu-list>
        <mu-list-item :class="JSON.parse(message).toUser === loginUser.id ? 'msg-left' : 'msg-right'" :title="JSON.parse(message).content" :key="message.timeStamp" v-for="message in chatContent">
          <mu-avatar :src="JSON.parse(message).toUser === loginUser.id ? chatUser.headimg : loginUser.headimg"
                     :slot="JSON.parse(message).toUser === loginUser.id ? 'leftAvatar' : 'rightAvatar'"/>
        </mu-list-item>
      </mu-list>
      <div class="blank"></div>
    </div>
    <div class="footer">
      <!--<input class="inputBox" name="message" v-model="message" @keyup="keyEnter($event)"/>-->
      <mu-text-field class="inputBox" name="message" v-model="message" @keyup="keyEnter($event)"/>
      <mu-raised-button label="发送" @click="send()" v-bind:disabled="!message" primary/>
    </div>
  </div>
</template>

<script>
  //  import {mapGetters} from 'vuex'
  import axios from 'axios'
  import qs from 'qs'
  import {save, load} from '../util/cache'

  export default{
    data() {
      return {
        message: ''
      }
    },
    methods: {
      send() {
        let postMessage = {
          fromUser: this.loginUser.id,
          toUser: this.chatUser.id,
          content: this.message,
          timeStamp: (new Date().getTime())
        };
        axios.post('http://im.fanggongxin.net/message/send', qs.stringify(postMessage)).then((resp) => {
          console.log(resp.data)
          this.message = '';
//          save(postMessage);
        })
      },
      closeChat() {
        this.$router.push('/home');
      },
      keyEnter(event) {
        console.log(event.keyCode)
        if (event.keyCode === 13 && this.message !== '') {
          this.send();
        }
      }
    },
    computed: {
      chatUser() {
        return this.$store.state.app.chatUser;
      },
      loginUser() {
        return this.$store.state.app.loginUser;
      },
      newMessage() {
        return this.$store.state.app.newMessage;
      },
      chatContent() {
        return this.$store.state.app.chatContent;
      }
    },
    watch: {
      newMessage: function () {
        if (this.newMessage) {
          let cache = load();
          let content = cache.messages.filter((item) => {
            let message = JSON.parse(item);
//            console.log(message.fromUser);
//            console.log(this.chatUser.id);
            return (message.fromUser === this.chatUser.id && message.toUser === this.loginUser.id) ||
              (message.toUser === this.chatUser.id && message.fromUser === this.loginUser.id);
          });
//          console.log(cache.messages)
          this.$store.dispatch('appSetChatContent', content);
          this.$store.dispatch('appSetNewMessage', false);

          console.log(this.$refs.container.offsetHeight);
          document.body.scrollTop = this.$refs.container.offsetHeight;
//          document.documentElement.scrollTop = height;
        }
      }
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">

  .header
    position fixed
    width 100%
    top 0
    left 0
    z-index 10
  .blank
    height 100px
  .chat
    padding-top 60px
  .footer
    position fixed
    width 100%
    height 100px
    bottom 0px
    z-index 10
    background-color white
  .msg-left
    text-align left
  .msg-right
    text-align right
</style>
